<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="../js/jquery-3.6.0.min.js"></script>

    <script type="text/javascript">

      $(function (){

        $("#children").click(function (){

            //获取ul标签的所有子节点对象
            var childrenAll = $("ul").children();

            //第一种遍历方式
            // for (let i = 0; i < childrenAll.length; i++) {
            //     alert(childrenAll[i].innerHTML);
            // }

            //第二种遍历方式
            // childrenAll.each(function (){
            //     alert($(this).html());
            // })

            //第三种遍历方式
            // $.each(childrenAll,function (index,value){
            //     alert(index+"-----"+value.innerText);
            // })

        })

        $("#next").click(function (){
            //获取某个元素对象的同级的下一个元素
            var h1Next = $("h1").next();

            //如果有多个符合条件的元素对象，可以进行遍历
            h1Next.each(function (){
                alert($(this).html());
            })
        })

        $("#prev").click(function (){
            var liPrev = $("ul#firstUl li:eq(1)").prev();

            alert(liPrev.html())
        })


        $("#siblings").click(function (){

            var ulSiblings = $("ul#secondUl").siblings();

            // for(node in ulSiblings){
            //     alert(ulSiblings[node].innerHTML);
            // }

            $.each(ulSiblings,function (){
                alert($(this).html());
            })
        })

        $("#parent").click(function (){

            var liParent = $("ul#firstUl li:eq(1)").parent();

            $.each(liParent,function (){
                alert($(this).html());
            })
        })

        $("#parents").click(function (){
            var liParents = $("ul#firstUl li:eq(1)").parents();

            $.each(liParents,function (){
                alert($(this).html());
            })
        })

      })

    </script>
</head>
<body>

  <div>
      <ul id="firstUl">
          <h1>标题1</h1>
          <li>blue</li>
          <li>yellow</li>
          <li>green</li>
          <li>white</li>
      </ul>
  </div>

  <h1>标题2</h1>

  <ul id="secondUl">
    <h1>标题3</h1>
    <li>吃饭</li>
    <li>睡觉</li>
    <li>打豆豆</li>
  </ul>

  <input type="button" id="children" value="子节点"/>
  <input type="button" id="next" value="下一个节点"/>
  <input type="button" id="prev" value="上一个节点"/>
  <input type="button" id="siblings" value="兄弟节点"/>
  <input type="button" id="parent" value="父级节点"/>
  <input type="button" id="parents" value="父级所有节点"/>


</body>
</html>